<!--  -->
<template>
  <div>
    <scroll class="scroll" ref="scroll" :probeType="3" @scroll="scroll" @scrollEnd="scrollEnd">
      <template v-for="(singerGroup,idx) in singerGroupData">
        <div
             :ref="'tile_'+singerGroup.name[0]"
             :id="'tile_'+singerGroup.name[0]"
             class="tile" :key="idx">{{singerGroup.name}}</div>
        <singer-item v-for="(item) in singerGroup.list" :key="item" :img="'/ablum/109951162959497442.jpg'" :name="item"></singer-item>
      </template>
    </scroll>
    <div class="nav-banner">{{}}</div>
    <div class="left-nav" 
        ref="leftNav"
        @touchmove.prevent="fastSMove"
      >
      <div v-for="(item,idx) in navGroup" 
          :class="{'active-nav':idx === currentIndex}" 
          @click="selectnav(idx)"
          :key="item" >{{item}}</div>
    </div>
  </div>
</template>

<script>

import Scroll from "base/scroll.vue"
import SingerItem from "./singerItem"

import {singerGroupList} from "network/singer"
import {_md,_mt} from "common/utils"

export default {
  data () {
    return {
        singerGroupData: [],
        currentIndex: 0 // 右边导航栏索引
    };
  },

  components: {
    SingerItem,
    Scroll
  },

  computed: {
    navGroup(){
        return this.singerGroupData.map(item => item.name[0]) // 用于右侧列表
    }
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        // 获取右侧的滚动高度
        this.totalHeight = this.$refs.leftNav.offsetHeight;
        this.offsetTop = this.$refs.leftNav.offsetTop;

        // 右侧各个字母的自身父元素的高度
        this.getZimuHeight(); 
      },20)

    })
  },
  watch:{
    currentIndex(index){
      if(this.fastScroll){ 
        // fastscroll 为了解决不让列表滚动不出现循环事件促发
        this.$refs.scroll.scrollToElement('#tile_'+ this.navGroup[index],100)
      }
    }
  },
  methods: {
    getZimuHeight(){
      this._zimuHeightList = this.navGroup.map(zimu => {
          return [zimu, this.$refs['tile_'+zimu][0].offsetTop]
      });
    },
    scrollEnd(position) {
      this.fastScroll = true;
      if(position == 0){
        this.currentIndex = 0;
      }
    },
    scroll(position){
      if(this.fastScroll){
        this.fastScroll = false
      }

      for(let i=0; i < this._zimuHeightList.length;i++){
        if(this._zimuHeightList[i][1] > -position.y ){
          this.currentIndex = i - 1;
          return;
        }
      }
      this.currentIndex = 26;
      
    },
    // 点击事件
    selectnav(idx){
      this.currentIndex = idx;
    },
    fastSStart(e){

    },
    fastSMove(e){
      if(!this.fastScroll){
        this.fastScroll = true;
        this.$refs.scroll.stop();
      }
        let scopeY = e.touches[0].clientY - this.offsetTop - 18 ; // 18是padding
        if(scopeY < 0) {
          scopeY = 0
        }
        if( scopeY > this.offsetHeight) {
          scopeY = this.offsetHeight;
        }
        if (scopeY == 0) {
          this.currentIndex = 0;
        }else if(scopeY == this.offsetHeight){
          this.currentIndex = this.navGroup.length - 1;
        }else{
          let currentIndex = Number.parseInt(scopeY / 16)  // 16是字母块大小
          this.currentIndex = currentIndex > this.navGroup.length - 1 ? this.navGroup.length - 1 : currentIndex;
        }
      
    },
    fastSEnd(e){
      this.fastScroll = false;
    }
  },
  created(){
    singerGroupList().then(data => this.singerGroupData = data.map(item => {
      item.name = item.name.toUpperCase()
      return item
    }))
  }
}

</script>
<style scoped>
    .scroll {
      width: 100vw;
      overflow: hidden;
      position: relative;
      height: 580px;
    }

    .tile {
      padding: 6px 22px;
      background: var(--color-highlight-background);
      font-size: 11px;
    }

    .left-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      position:absolute;
      font-size: 10px;
      background: #1A1A1A;
      color:  var(--color-text-l);

      top: 130px;
      right: 0;
      padding: 18px 3px;
      border-radius: 10px;
    }

    .left-nav div{
      padding: 2px 0;
    }

    .active-nav{
      color: var(--color-theme);
    }
</style>